<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>TecoGDB Message</title>
  <style>
    a {
      background-color: #f6f8fa;
      text-decoration: underline;
    }

    .highlight {
      font-weight: bold;
      text-decoration: underline;
      font-style: italic;
    }

    .highlightKey {
      background-color: rgb(255, 153, 0);
      font-weight: bold;
      color: black;
    }

    #output {
      white-space: pre-wrap;
    }
  </style>
</head>

<body>
  <div id="output"></div>
  <!-- <label for="mySelect">请选择核组和核：</label>
  <select id="mySelect">
  </select> -->
  <div id="bottom"></div>
  <script>
    const vscode = acquireVsCodeApi();
    function highlight(match) {
      const regex = new RegExp(match, 'gm');
      const output = document.getElementById('output');
      if (output) {
        // 查找关键字并将其替换为带有 class 的文本
        const text = output.innerHTML.replace(regex, `<span class="highlight">${match}</span>`);
        // 将输出写入 HTML
        output.innerHTML = text;
      }
    }

    function openFile(path) {
      vscode.postMessage({ command: 'openFile', data: path });
    }

    window.addEventListener('message', event => {
      const output = document.getElementById('output');
      // const labelElement = document.querySelector("label[for='mySelect']");
      // const selectElement = document.getElementById("mySelect");
      // selectElement.style.display = "none";
      // labelElement.style.display = "none";
      if (event.data.command == 'output') {
        // 将文本写入 HTML
        output.innerHTML += `<p>${event.data.text}</p>`;
        // 遍历所有匹配项并将其替换为带有链接和 class 的文本
        event.data.matchesDir.forEach(match => {
          const regex = new RegExp(match, 'gm');
          const text = output.innerHTML.replace(regex, `<a href="#" onclick="openFile('${match}')"><span class="highlight">${match}</span></a>`);
          output.innerHTML = text;
        });
        event.data.matchesKey.forEach(matchKey => {
          const regex = new RegExp(matchKey, 'gm');
          const text = output.innerHTML.replace(regex, `<span href="#"><span class="highlightKey">${matchKey}</span></span>`);
          output.innerHTML = text;
        });
        window.scrollTo({
          top: document.querySelector('#bottom').offsetTop,
          behavior: 'smooth'
        })
      }
      if (event.data.command == 'exit') {
        output.innerHTML += `<span class="highlightKey">${event.data.exit}</span></span>`;
        window.scrollTo({
          top: document.querySelector('#bottom').offsetTop,
          behavior: 'smooth'
        })
      }
      // if (event.data.command == 'options') {
      //   console.log("sun==>", event.data.selectNumber)
      //   selectElement.style.display = "block";
      //   labelElement.style.display = "block";
      //   selectElement.options.length = 0
      //   for (const option of event.data.selectNumber) {
      //     const optionElement = document.createElement("option");
      //     optionElement.value = option;
      //     optionElement.text = option;
      //     selectElement.appendChild(optionElement);
      //   }
      //   selectElement.addEventListener("change", event => {
      //     const selectedValue = event.target.value;
      //     //console.log(selectedValue);
      //     vscode.postMessage({ command: 'select', data: selectedValue });
      //     // 在这里可以继续处理所选值
      //     selectElement.style.display = "none";
      //     labelElement.style.display = "none";
      //   });
      //   window.scrollTo({
      //     top: document.querySelector('#bottom').offsetTop,
      //     behavior: 'smooth'
      //   })
      // }
    });
  </script>
</body>

</html>